<script setup lang='ts'>
import { cloneDeep } from 'lodash-es'
import TopButtons from '../components/top-buttons.vue'
import TopConfig1 from '../components/top-config1.vue'
import commonTable from './components/common-table.vue' // 广告类-表格
import goodsTable from './components/goods-table.vue' // 商品类-表格
import adList from './components/ad-list.vue'
import goodsList from './components/goods-list.vue'
import hotWord from './components/hot-world.vue'
import rankList from './components/rankList.vue'
import recommendList from './components/recommendList.vue'

const props = defineProps<{
    activeTreeId?: number | string
    activehandler: string
    activePtagEn?: string
    parentTreeId?: number
    currentRootPtagEn?: string // 当前选中树的根节点 ptagEn
    parentPtagEn?: string // 父级 ptagEn
}>()
const { activeTreeId, activehandler, activePtagEn, parentTreeId, currentRootPtagEn, parentPtagEn } = toRefs(props)

// 1.顶部按钮
// const emits = defineEmits(['currentPublish', 'timedPublish'])
// 2.顶部配置
const initialTopForm = {
    isDefault: 1, // 内容配置
    carouselType: 0, // 展示机制
    carouselSpeed: 2000,
    sort: '',
    isCarouselSpeedChange: false,
}
const topForm = ref(cloneDeep(initialTopForm))
const adVisible = ref(false)
const goodsVisible = ref(false)
const defaultGroupId = ref<number | null>(null)
// 3.表格
const commonRef = ref()
const goodsRef = ref()
const records = ref([]) // 当前表格数据
const chooseAdId = ref() // 已选择的广告组id
const chooseGoodsId = ref()

watch(activeTreeId, (val) => {
    if (val) {
        topForm.value = cloneDeep(initialTopForm)
        if (activehandler.value === 'advertisementGroup') {
            topForm.value.isDefault = 1
        }
        else {
            topForm.value.isDefault = 0
        }
    }
})

const recordsNum = computed(() => {
    return records.value.length || 0
})

const isDefault = computed(() => {
    return topForm.value.isDefault
})

// 1.顶部按钮
function currentPublish() {
    if (activehandler.value === 'advertisementGroup') {
        commonRef.value.currentPublish()
    }
    else if (activehandler.value === 'commodityGroup') {
        goodsRef.value.currentPublish()
    }
    topForm.value.isCarouselSpeedChange = false
}
function timedPublish(params) {
    if (activehandler.value === 'advertisementGroup') {
        commonRef.value.timedPublish(params)
    }
    else if (activehandler.value === 'commodityGroup') {
        goodsRef.value.timedPublish(params)
    }
    topForm.value.isCarouselSpeedChange = false
}

// 关联广告 - 确认
function confirmAd(id) {
    console.log('当前选择广告组', id)
    chooseAdId.value = id
    commonRef.value.getSnapList(id, 0, 'choosed')
}
// 关联商品 - 确认
function confirmGoods(id) {
    console.log('当前选择商品组', id)
    chooseGoodsId.value = id
    goodsRef.value.getSnapList(id, 0, 'choosed')
}

// 广告组弹框
function showAdList() {
    adVisible.value = true
}

// 商品组弹框
function showGoodsList() {
    goodsVisible.value = true
}

// 默认组的groupId传给顶部按钮区域
function getDefaultGroupId(id: number | null) {
    defaultGroupId.value = id
}
</script>

<template>
    <!-- 1.顶部按钮 -->
    <TopButtons v-if="activehandler !== 'hotWord' && activehandler !== 'rankingList' && activehandler !== 'recommendHouse'"
                v-model:recordsnum="recordsNum"
                v-model:isdefault="isDefault"
                v-model:defaultGroupId="defaultGroupId"
                v-model:topForm="topForm"
                @current-publish="currentPublish"
                @timed-publish="timedPublish"
    />

    <!-- 2.顶部配置 -->
    <TopConfig1 v-if="activehandler !== 'hotWord' && activehandler !== 'rankingList' && activehandler !== 'recommendHouse'"
                v-model:topForm="topForm"
                v-model:chooseGoodsId="chooseGoodsId"
                v-model:chooseAdId="chooseAdId"
                :active-tree-id="activeTreeId"
                :activehandler="activehandler"
                :parent-tree-id="parentTreeId"
    />

    <!-- 广告类 -->
    <template v-if="activehandler === 'advertisementGroup'">
        <!-- 3.表格 -->
        <ElCard shadow="never">
            <commonTable ref="commonRef"
                         v-model:chooseAdId="chooseAdId"
                         v-model:topForm="topForm"
                         v-model:records="records"
                         :active-tree-id="activeTreeId"
                         :active-ptag-en="activePtagEn"
                         @show-ad-list="showAdList"
                         @get-default-group-id="getDefaultGroupId"
            />
        </ElCard>
        <!-- 4.广告组 -->
        <adList v-model:show="adVisible"
                :active-ptag-en="activePtagEn"
                @confirm-ad="confirmAd"
        />
    </template>

    <!-- 商品类 -->
    <template v-if="activehandler === 'commodityGroup'">
        <!-- 3.表格 -->
        <ElCard shadow="never">
            <goodsTable ref="goodsRef"
                        v-model:chooseGoodsId="chooseGoodsId"
                        v-model:topForm="topForm"
                        v-model:records="records"
                        :active-tree-id="activeTreeId"
                        @show-goods-list="showGoodsList"
                        @get-default-group-id="getDefaultGroupId"
            />
        </ElCard>
        <!-- 4.广告组 -->
        <goodsList v-model:show="goodsVisible"
                   @confirm-goods="confirmGoods"
        />
    </template>

    <!-- 热词 -->
    <ElCard v-if="activehandler === 'hotWord'"
            shadow="never"
    >
        <hotWord :active-tree-id="activeTreeId" />
    </ElCard>

    <!-- 榜单 -->
    <ElCard v-if="activehandler === 'rankingList'"
            shadow="never"
    >
        <rankList :active-tree-id="activeTreeId"
                  :current-root-ptag-en="currentRootPtagEn"
                  :parent-ptag-en="parentPtagEn"
        />
    </ElCard>

    <!-- 楼盘推荐 -->
    <ElCard v-if="activehandler === 'recommendHouse'"
            shadow="never"
    >
        <recommendList :active-tree-id="activeTreeId" />
    </ElCard>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
    border: none;
}
</style>
